<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echart_柱形图3</title>
    <style>
        #echart1 {
            height: 600px;
            width: 800px;
            margin-left: 60px;
            margin-top: 60px;
        }
    </style>
</head>

<body>
    <div id="echart1"></div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script type="text/javascript">
    function aaa(xdata, ydata) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'));

        // 指定图表的配置项和数据
        var option = {
            color: ['#FF9DAD'],
            title: {
                text: 'API服务输出'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: 'green'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    interval: 0,
                    rotate: 75
                },
                axisLine: { //x轴线
                    show: true,
                    lineStyle: {
                        color: '#ffffff'
                    }
                },
                splitLine: {
                    show: false, //X网格线
                    lineStyle: { //x网格线
                        color: '#ffffff'
                    }
                },
                data: xdata
            }],
            yAxis: [{
                type: 'value',
                splitNumber: 5,
                name: '万次',
            }],
            series: [{
                name: 'API调用次数',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                data: ydata
            }]
        };

        myChart.setOption(option);
        // 使用刚指定的配置项和数据显示图表。
    }

    $(function() {
        //
        $.ajax({
            //请求方式
            type: "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            headers: {
                'API-TOKEN': 'C122206C91F7A4948CE7B8372C825339'
            },
            //请求地址
            url: "http://172.25.4.179:81/api/gateway/api_stat?startdate=20200510&enddate=20200526",
            //请求成功
            success: function(result) {
                var xdata = [];
                var ydata = [];
                for (let index = 0; index < result.data.length; index++) {
                    const element = result.data[index];
                    xdata.push(result.data[index].idate);
                    ydata.push(result.data[index].scount / 10000);
                }
                aaa(xdata, ydata)
            },
            //请求失败，包含具体的错误信息
            error: function(e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    });
</script>

</html>